<template>
  <div class="auth-wrapper">
    <div class="main-wrapper">
      <div class="option-box">
        <el-button type="primary" v-has="'auth:add'" @click="addAuth">添加权限</el-button>
      </div>

      <TreeTable :data="treeData" stripe>
        <el-table-column prop="authName" label="权限名">
          <template slot-scope="scope">
            <ExpandIcon :row="scope.row" :index="scope.$index"/>
            {{scope.row.authName}}
          </template>
        </el-table-column>
        <el-table-column prop="url" label="请求地址"/>
        <el-table-column prop="router" label="路由地址" />
        <el-table-column prop="type" label="类型">
          <template slot-scope="scope">
            {{transformDict('auth_type', scope.row.type)}}
          </template>
        </el-table-column>
        <el-table-column prop="icon" label="图标" />
        <el-table-column prop="seq" label="排序号" />
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" v-has="'auth:update'" @click="editAuth(scope.$index, scope.row)">编辑</el-button>
            <el-button type="text" class="text-button-del" v-has="'auth:delete'" @click="delAuth(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </TreeTable>
    </div>

    <!-- 弹框 -->
    <el-dialog :title="dialog.dialogTitle"
      :visible.sync="dialog.dialogVisible"
      width="35%"
      :modal-append-to-body=false
      :close-on-click-modal=false
      :close-on-press-escape=false>
      <el-form ref="authForm" :model="authForm" :inline=true :rules="authFormRules" label-position="right" label-width="80px">
        <el-form-item label="权限名" prop="authName">
          <el-input v-model="authForm.authName" placeholder="请输入权限名" class="handle-input"></el-input>
        </el-form-item>
        <el-form-item label="父节点">
          <el-input v-model="authForm.parentName" class="handle-icon">
            <el-button @click="openInnerDialog" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="url">
          <el-input v-model="authForm.url" placeholder="请输入url" class="handle-input"></el-input>
        </el-form-item>
        <el-form-item label="路由">
          <el-input v-model="authForm.router" placeholder="请输入router" class="handle-input"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="authForm.type" placeholder="请选择类型" class="handle-select">
            <el-option v-for="(item, index) in authType" :key="index" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="authForm.icon" placeholder="请输入icon" class="handle-input"></el-input>
        </el-form-item>
        <el-form-item label="排序号" prop="seq">
          <el-input v-model.number="authForm.seq" placeholder="请输入排序号" class="handle-input"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="authForm.remark" placeholder="请输入备注" class="handle-textarea"></el-input>
        </el-form-item>
      </el-form>

      <!--内层dialog-->
      <el-dialog title="选择父节点"
        :visible.sync="dialog.innerVisible"
        width="20%"
        append-to-body>
        <el-tree
          :data="treeData"
          :props="defaultProps"
          :default-expand-all=false
          :highlight-current=true
          :expand-on-click-node=false
          node-key="id"
          ref="authTree">
        </el-tree>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="selectParent">确 定</el-button>
        </span>
      </el-dialog>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="dialog.submitLoading"  @click="authFormSubmit">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as auth from '@/api/auth'
import {TreeTable, ExpandIcon} from '@/components/TreeTable'
import {mapGetters} from 'vuex'

export default {
  name: 'AuthList',
  components: {TreeTable, ExpandIcon},
  data () {
    return {
      queryForm: {
        authName: '',
        type: ''
      },
      authForm: {
        id: '',
        parentId: '',
        parentName: '',
        authName: '',
        url: '',
        router: '',
        type: '',
        icon: '',
        seq: '',
        remark: ''
      },
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      treeData: [],
      dialog: {
        dialogVisible: false, // 弹窗
        dialogTitle: '', // 弹窗标题
        submitLoading: false,
        innerVisible: false // 内层弹框
      },
      isEdit: false, // 是否为修改操作
      tableLoading: true,

      authFormRules: {
        authName: [{required: true, message: '权限名不能为空', trigger: 'blur'}],
        url: [{required: true, message: 'url不能为空', trigger: 'blur'}],
        type: [{required: true, message: '请选择类型', trigger: 'blur'}],
        seq: [
          {required: true, message: '排序号不能为空', trigger: 'blur'},
          {type: 'integer', message: '排序号必须为整数', trigger: 'blur'}
        ],
        remark: [{max: 200, message: '最多200个字符', trigger: 'blur'}]
      }
    }
  },
  methods: {
    getTree () {
      auth.treeData().then(res => {
        this.treeData = [...res.data];
      });
    },
    transformDict (key, code) {
      return this.dictinfo(key, code);
    },
    addAuth () {
      this.isEdit = false;
      this.dialog.dialogVisible = true;
      this.dialog.dialogTitle = '添加';
    },
    editAuth (index, row) {
      this.isEdit = true;
      this.dialog.dialogTitle = '编辑';
      auth.getById(row.id).then(res => {
        this.authForm = {...res.data};
        this.authForm.parentName = row.parent ? row.parent.authName : '';
        this.dialog.dialogVisible = true;
      });
    },
    authFormSubmit () {
      this.$refs.authForm.validate(valid => {
        if (!valid) {
          return false;
        }
        this.dialog.submitLoading = true;
        let param = this.GLOBAL.handlerQueryParam({
          ...this.authForm
        });
        if (this.isEdit) {
          auth.editAuth(param)
            .then(res => {
              this.dialog.submitLoading = false;
              this.dialog.dialogVisible = false;
              this.getTree();
            })
            .catch(() => {
              this.dialog.submitLoading = false;
            })
        } else {
          auth.addAuth(param)
            .then(res => {
              this.dialog.submitLoading = false;
              this.dialog.dialogVisible = false;
              this.getTree();
            })
            .catch(() => {
              this.dialog.submitLoading = false;
            })
        }
      })
    },
    delAuth (index, row) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          auth.delAuth(row.id)
            .then(res => {
              this.$message.success('删除成功');
              this.getTree();
            });
        })
    },
    search () {
      this.getTree();
    },
    openInnerDialog () {
      this.dialog.innerVisible = true;
    },
    selectParent () {
      let parentNode = this.$refs.authTree.getCurrentNode();
      if (parentNode) {
        this.authForm.parentId = parentNode.id;
        this.authForm.parentName = parentNode.authName;
      }
      this.dialog.innerVisible = false;
    }
  },
  computed: {
    ...mapGetters(['dictinfo', 'dictList']),
    authType () {
      return this.dictList('auth_type');
    }
  },
  created () {
    this.getTree();
  },
  watch: {
    'dialog.dialogVisible' (val, old) {
      if (!val) { // val为false(关闭dialog)
        this.$refs.authForm.resetFields();
        this.GLOBAL.clearObject(this.authForm);
      } else {
        // this.authForm.parentId = this.treeNode.parentId;
        // this.authForm.parentName = this.treeNode.parentName;
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
